{% load static %}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="{% static 'logo.jpg' %}">
    <link rel="stylesheet" href="{% static 'css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
    <script src="{% static 'js/jquery.1.12.4.min.js' %}" charset="UTF-8"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" charset="UTF-8"></script>
    <script src="{% static 'js/jquery.form.js' %}" charset="UTF-8"></script>
    <script src="{% static 'js/global.js' %}" charset="UTF-8"></script>
    <script src="{% static 'js/login.js' %}" charset="UTF-8"></script>
    <title>鑫光网 - 登录 / 注册</title>
</head>
<body>
<div class="public-head-layout container">
<a class="logo" href="{% url 'goods:index' %}" style="background-image: url({% static 'logo.jpg' %});border-radius: 50%;background-position: center;"></a>
</div>
<div style="background:url({% static 'images/login_bg.jpg' %}) no-repeat center center; ">
    <div class="login-layout container">
        <div class="form-box login">
            <div class="tabs-nav">
                <h2>欢迎登录鑫光网平台</h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="{% url 'login:login_index' %}" method="post" id="login_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="login_phone" required placeholder="手机号"
                                   maxlength="11" autocomplete="off" type="tel">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
                        </label>
                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="login_error">
                            <!-- 错误信息 范例html
                            <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>密码错误</strong> 请重新输入密码
                            </div>
                             -->
                        </div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">
                        登录
                    </button>
                    <br>
                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                </form>

                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">登录成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="{% url 'goods:index' %}" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="{% url 'user:udai_welcome' %}"
                               class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box register">
            <div class="tabs-nav">
                <h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="{% url 'login:login' %}" method="post" id="register_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="register_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="smscode" id="register_sms" placeholder="输入验证码"
                                   type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="register_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>

                                  <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="false"></span>
                            </div>
                            <input class="form-control email" name="email" id="email" placeholder="请输入邮箱"
                                   autocomplete="off" type="email">
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="register_checkbox" type="checkbox" class="register_checkbox"><i></i>
                            同意<a href="{% url 'user:udai_article3' %}">X袋网用户协议</a>
                        </label>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="register_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit"
                            type="button">注册
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">注册成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="{% url 'goods:index' %}" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="{% url 'user:udai_welcome' %}"
                               class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box resetpwd">
            <div class="tabs-nav clearfix">
                <h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="https://rpg.blue/member.php?mod=logging&action=login" method="post"
                      id="resetpwd_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="resetpwd_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="sms" id="resetpwd_sms" placeholder="输入验证码" type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="resetpwd_pwd" placeholder="新的密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="resetpwd_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit"
                            type="button">重置密码
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">密码重置成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="{% url 'goods:index' %}" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                // 判断直接进入哪个页面 例如 login.php?p=register
                switch ($.getUrlParam('p')) {
                    case 'register':
                        $('.register').show();
                        break;
                    case 'resetpwd':
                        $('.resetpwd').show();
                        break;
                    default:
                        $('.login').show();
                }
                // 发送验证码事件
                $('.getsms').click(function () {
                    var phone = $(this).parents('form').find('input.phone');
                    var error = $(this).parents('form').find('.error_msg');
                    switch (phone.validatemobile()) {
                        case 0:
                            // 短信验证码的php请求
                            $.ajax({
                                type: "get",
                                url: "/login/check_phone/",
                                data: 'phone=' + phone.val(),
                                success: function (msg) {
                                    console.log("返回结果: " + msg);
                                    //转换为json
                                    var obj = eval("(" + msg + ")");
                                    console.log(obj);
                                    if (obj.message === 'OK') {
                                        $('.getsms').rewire(60);
                                        error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));

                                    } else {
                                        console.log('手机被注册');
                                        error.html(msgtemp('<strong>手机已被注册</strong> 请登录', 'alert-success'))
                                    }
                                },
                                error: function (resp) {
                                    console.log("Error: " + resp.status);
                                    console.log('请求后台失败!')
                                }
                            });
                            break;
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            break;
                    }
                });

                $('#register_sms').change(function () {
                    var sms_code = $('#register_sms').val();
                    var error = $(this).parents('form').find('.error_msg');
                    var phone = $('#register_phone').val();
                    console.log(sms_code);
                    $.ajax({
                        type: "get",
                        url: "/login/sms_check/",
                        data: 'phone=' + phone + '&code=' + sms_code,
                        success: function (msg) {
                            console.log("返回结果: " + msg);
                            //转换为json
                            var obj = eval("(" + msg + ")");
                            console.log(obj.message);
                            if (obj.message === sms_code) {
                                error.html(msgtemp('<strong>验证码正确</strong>', 'alert-success'));
                            } else {
                                error.html(msgtemp('<strong>验证码错误</strong>', 'alert-warning'));
                            }
                        },
                        error: function (resp) {
                            console.log("Error: " + resp.status);
                            console.log('请求后台失败!')
                        }
                    })
                });
                // 以下确定按钮仅供参考
                $('#register_submit').click(function () {
                    var phone = $('#register_phone').val();
                    var pwd = $('#register_pwd');
                    var error = $(this).parents('form').find('.error_msg');
                    var sms_code = $('#register_sms').val();
                    var email = $('#email').val();
                    console.log(email);
                    //密码正则
                    var reg = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
                    //邮箱正则
                    var email_reg = /^[a-z0-9][\w.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
                    // 查看协议是否勾选
                    obj = document.getElementsByClassName('register_checkbox');
                    check_val = [];
                    for (k in obj) {
                        if (obj[k].checked)
                            check_val.push(obj[k].value);
                    }
                    console.log(check_val);
                    // 密码的验证
                    if (phone.length === 0) {
                        error.html(msgtemp('<strong>手机号为空</strong> 请输入手机号', 'alert-warning'));
                    } else if (sms_code.length === 0) {
                        error.html(msgtemp('<strong>验证码为空</strong> 请输入验证码', 'alert-warning'));
                    } else if (pwd.val().length === 0 || pwd.val() < 6) {
                        error.html(msgtemp('<strong>密码长度小于6位</strong> 请重新输入密码', 'alert-warning'));
                    } else if (reg.test(pwd.val()) === false) {
                        console.log(reg.test(pwd.val()));
                        error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
                    }else if (email === 0) {
                        console.log(reg.test(pwd.val()));
                        error.html(msgtemp('<strong>邮箱不能为空</strong><br>请输入邮箱', 'alert-warning'));
                    }else if (email_reg.test(email) === false) {
                        console.log(email_reg.test(email));
                        error.html(msgtemp('<strong>邮箱格式错误</strong><br>请重新输入', 'alert-warning'));
                    }  else if (check_val.length === 0) {
                        error.html(msgtemp('<strong>请勾选协议</strong>', 'alert-warning'));
                    } else {
                        $.ajax({
                            type: 'get',
                            url: '/login/register/',
                            data: 'phone=' + phone + '&pwd=' + pwd.val()+'&email='+email,
                            success: function (msg) {
                                console.log('返回的结果+', msg);
                                //已经是json
                                var obj = eval("(" + msg + ")");
                                if (obj.result === 'OK') {
                                    console.log('成功');
                                    error.html(msgtemp('<strong>注册成功</strong>  请登录', 'alert-success'));
                                } else if (obj.result === 'NO') {
                                    console.log('NO');
                                    error.html(msgtemp('<strong>验证码以过期</strong>  请联系重新获取', 'alert-warning'));
                                }
                            },
                            error: function (res) {
                                //状态码
                                console.log(res.status)
                            }
                        })
                    }
                });

                $('#login_submit').click(function () {
                    var pwd = $('#login_pwd').val();
                    var error = $(this).parents('form').find('.error_msg');
                    var phone = $('#login_phone');

                    // 验证手机号参考这个
                    switch (phone.validatemobile()) {
                        case 0:
                            $.ajax({
                                type: 'get',
                                url: '/login/login_check_phone/',
                                data: 'phone=' + phone.val(),
                                success: function (msg) {
                                    console.log('返回的结果+', msg);
                                    //已经是json
                                    var obj = eval("(" + msg + ")");
                                    if (obj.result.length === 0) {
                                        console.log('没有账号');
                                        error.html(msgtemp('<strong>手机号没有被注册</strong> 请注册', 'alert-success'));
                                    } else {

                                        console.log('有账号');


                                    }
                                },
                                error: function (res) {
                                    //状态码
                                    console.log(res.status)
                                }
                            });
                            break;
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            break;
                    }
                    $.ajax({
                        type: 'get',
                        url: '/login/login_check_pwd/',
                        data: 'phone=' + phone.val() + '&pwd=' + pwd,
                        success: function (msg) {
                            console.log('user_login返回的结果+', msg);
                            //已经是json
                            var obj = eval("(" + msg + ")");
                            console.log(obj, 'obj');
                            if (obj.result === 'OK') {
                                console.log('密码正确');
                                error.html(msgtemp('<strong>密码正确</strong>', 'alert-success'));
                                window.location.href = "http://127.0.0.1:8000/";
                            } else if (obj.result === '密码错误') {
                                console.log('密码错误');
                                error.html(msgtemp('<strong>密码错误</strong>  请重新输入', 'alert-warning'));
                            } else {
                                console.log('邮箱激活');
                                error.html(msgtemp('<strong>您的账号未激活</strong>  请去邮箱激活', 'alert-warning'));
                            }
                        },
                        error: function (res) {
                            //状态码
                            console.log(res.status)
                        }
                    })

                })
            });

        </script>
    </div>
</div>
<div class="footer-login container clearfix">
    <ul class="links">
        <a href="">
            <li>网店代销</li>
        </a>
        <a href="">
            <li>X袋学堂</li>
        </a>
        <a href="">
            <li>联系我们</li>
        </a>
        <a href="">
            <li>企业简介</li>
        </a>
        <a href="">
            <li>新手上路</li>
        </a>
    </ul>
    <!-- 版权 -->
    <p class="copyright">
        © 2005-2018 光华商城 版权所有，并保留所有权利。 技术支持：<a style="font-family:'Microsoft Yahei'; color:#666;"
                                               href="http://www.jsdaima.com/" title="js代码" target="_blank">js代码</a><br>
        ICP备案证书号：ICP备XXXXXXXX号&nbsp;&nbsp;&nbsp;&nbsp;中国北京朝阳区环球国际金融中心大厦99F&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18888888888&nbsp;&nbsp;&nbsp;&nbsp;E-mail:
        18888888888@qq.com
    </p>
</div>
</body>
</html>